<template>
  <div class="singer" ref="singer">
      <list-view :data="singers" @select="selectedSinger" ref="list"></list-view>
      <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
import {getSingerList} from 'api/singer'
import {ERR_OK} from 'api/config'
import Singer from 'common/js/singer'
import ListView from 'base/listview/listview'
import {mapMutations} from 'vuex'
import {playlistMixin} from 'common/js/mixin'

const HOT_SINGER_LEN =10
const HOT_NAME = '热门'

export default {
    mixins:[playlistMixin],
    data() {
        return{
            singers:[]
        }
    },
    created() {
        this._getSingerList()
        
    },
    methods: {
        handlePlaylist(playlist){
            const bottom = playlist.length > 0 ?'60px':'';
            this.$refs.singer.style.bottom=bottom;
            this.$refs.list.refresh();
        },
        selectedSinger(singer){
            this.$router.push({
                path:`/singer/${singer.id}`
            })

            this.setSinger(singer)
        },

        _getSingerList() {
            getSingerList().then((res)=>{
                if(res.code==ERR_OK){
                    console.log('歌手列表原始数据',res.data.list)
                    this.singers=this._normalizeSinger(res.data.list)
                    
                    // this.singers=res.data.list;
                }
                console.log(res)
                
            })

        
        },
        _normalizeSinger(list) {
            let map={
                hot:{
                    title:HOT_NAME,
                    items:[]
                }
            }
            list.forEach((item,index)=>{
                if(index<HOT_SINGER_LEN) {
                    map.hot.items.push(new Singer({
                        id:item.Fsinger_mid,
                        name:item.Fsinger_name,
                    }))
                }
                //按照歌手名字的拼音首字母聚类
                const key =item.Findex;
                if(!map[key]){
                    map[key] = {
                        title:key,
                        items:[]
                    }
                }

                map[key].items.push(new Singer({
                    id:item.Fsinger_mid,
                    name:item.Fsinger_name,
                }))
            })

            //为了得到有序列表
            let hot=[];
            let ret=[];
            for(let key in map) {
                let val=map[key];
                if(val.title.match(/[a-zA-Z]/)){
                    ret.push(val)
                } else if(val.title==HOT_NAME){
                    hot.push(val)
                }
            }
            ret.sort((a,b)=>{
                return a.title.charCodeAt(0)-b.title.charCodeAt(0)
            })
            console.log('转换后的歌手列表',hot.concat(ret))

            return hot.concat(ret)

            // console.log(map);
        },

        ...mapMutations({
            setSinger:'SET_SINGER'
        })
    },
    components: {
        ListView
    }
};
</script>

<style lang="stylus" scoped>
.singer {
    position: fixed;
    top: 88px;
    bottom: 0;
    width: 100%;
}
</style>

